﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>界面预览 - 爱手工网</title>
    <style type="text/css">
        #p-Title,
        .p-btns,
        .p-options{ width: 900px;margin: auto;text-align: center;}
        #p-Title{font-size: 20px;margin: 10px auto;font-weight: bold;}
        #myFrame{border: 1px solid blue;min-width: 800px;min-height: 1024px;width: 1024px;margin: 10px auto;display: block;}
    </style>
</head>
<body>
    <div id="p-Title">爱手工网界面预览</div>
    <div class="p-btns">
        <a href="javascript:;" onclick="changePage('首页.html');">首页</a>
        <a href="javascript:;" onclick="changePage('注册.html');">注册</a>
        <a href="javascript:;" onclick="changePage('注册 登录.html');">注册 登录</a>
        <a href="javascript:;" onclick="changePage('文章类页.html');">文章类页</a>
        <a href="javascript:;" onclick="changePage('文章内页.html');">文章内页</a>
        <a href="javascript:;" onclick="changePage('购物车.html');">购物车</a>
        <a href="javascript:;" onclick="changePage('商品类页.html');">商品类页</a>
        <a href="javascript:;" onclick="changePage('商品内页.html');">商品内页</a>
        <a href="javascript:;" onclick="changePage('DIY主页面.html');">DIY主页面</a>
    </div>
    <div class="p-options">
        选项：
        <input type="checkbox" onclick="changeTarget(this)" id="chkTarget"/><label for="chkTarget">新窗口打开</label>
        <input type="checkbox" onclick="changeWScreen(this)" id="chkWScreen"/><label for="chkWScreen">宽屏</label>
    </div>
    <iframe id="myFrame" src="首页.html"></iframe>
    <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            window.setInterval("reinitIframe()", 200);
        });

        function changePage(pageName) {
            $("#myFrame").attr("src", pageName);
        }

        function reinitIframe() {
            var iframe = document.getElementById("myFrame");
            try {
                iframe.height = iframe.contentWindow.document.documentElement.scrollHeight;
            } catch (ex) { }
        }

        function changeTarget(obj) {
            if ($(obj).attr("checked")) {
                $("a", ".p-btns").attr("Target", "_blank");
                $("a", ".p-btns").each(function(i) {
                    var target = $(this).html() + ".html";
                    $(this).attr("href", target);
                });
            }
            else {
                $("a", ".p-btns").removeAttr("Target");
                $("a", ".p-btns").attr("href", "javascript:;");
            }
        }

        function changeWScreen(obj) {
            if ($(obj).attr("checked")) {
                $("#myFrame").css("width", "1330px");
            }
            else {
                $("#myFrame").css("width", "1024px");
            }
        }
        
    </script>
</body>
</html>